<template>
  <div class="movie-detail-container">
    <div v-if="movie" class="movie-detail-content">
      <header class="detail-header">
        <button class="back-button" @click="$router.back()">
          <i class="icon-back"></i>
        </button>
        
        <h1 class="movie-title">{{ movie.title }}</h1>
        
        <div class="detail-actions">
          <button class="share-button">
            <i class="icon-share"></i>
          </button>
          <button class="favorite-button" @click="toggleFavorite">
            <i :class="['icon-favorite', { 'icon-active': isFavorite }]"></i>
          </button>
        </div>
      </header>
      
      <div class="movie-main">
<div class="movie-poster-container">
  <img :src="movie.image" alt="Movie Poster" class="movie-poster" />
  <div class="play-button" @click="startPlayback" v-if="!isPlaying">
    <i class="icon-play"></i>
  </div>
  <div class="video-player" :class="{ active: isPlaying }">
    <video controls style="width: 100%; height: 100%;">
      <source src="http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4" type="video/mp4" />
      您的浏览器不支持视频播放。
    </video>
  </div>
</div>
        
      </div>
      
      <div class="movie-tabs">
        
        <div class="tab-content">
          <div class="detail-section">
            <h3>剧情简介</h3>
            <p>{{ movie.description }}</p>
          </div>
          
          <div class="detail-section">
            <h3>基本信息</h3>
            <div class="info-items">
              <div class="info-item">
                <span class="label">导演:</span>
                <span class="value">{{ movie.director || '暂无信息' }}</span>
              </div>
              <div class="info-item">
                <span class="label">主演:</span>
                <span class="value">{{ movie.actors || '暂无信息' }}</span>
              </div>
              <div class="info-item">
                <span class="label">类型:</span>
                <span class="value">{{ movie.genre }}</span>
              </div>
              <div class="info-item">
                <span class="label">制片国家/地区:</span>
                <span class="value">{{ movie.region || '暂无信息' }}</span>
              </div>
            </div>
          </div>
          
          <div class="cast-section" v-if="movie.cast && movie.cast.length">
            <h3>演职人员</h3>
            <div class="cast-list">
              <div v-for="(actor, index) in movie.cast" :key="index" class="cast-item">
                <img :src="actor.image" :alt="actor.name" class="cast-image" />
                <div class="cast-info">
                  <div class="cast-name">{{ actor.name }}</div>
                  <div class="cast-role">{{ actor.role }}</div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    
    <div v-else class="loading-container">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const movie = ref(null);
const isFavorite = ref(false);
const isPlaying = ref(false);
const startPlayback = () => {
  isPlaying.value = true;
};
const movies = [
  {
    id: 1,
    title: '创意电影',
    description: '这是创意电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/创意.jpeg'
  },
  {
    id: 2,
    title: '剧情电影',
    description: '这是剧情电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/剧情.jpeg'
  },
  {
    id: 3,
    title: '动画电影',
    description: '这是动画电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/动画.jpeg'
  },
  {
    id: 4,
    title: '励志电影',
    description: '这是励志电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/励志.jpeg'
  },
  {
    id: 5,
    title: '实验电影',
    description: '这是实验电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/实验.jpeg'
  },
  {
    id: 6,
    title: '广告电影',
    description: '这是广告电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/广告.jpeg'
  },
  {
    id: 7,
    title: '搞笑电影',
    description: '这是搞笑电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg'
  },
  {
    id: 8,
    title: '旅行电影',
    description: '这是旅行电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/旅行.jpeg'
  },
  {
    id: 9,
    title: '时尚电影',
    description: '这是时尚电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/时尚.jpeg'
  },
  {
    id: 10,
    title: '汽车电影',
    description: '这是汽车电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/汽车.jpeg'
  },
  {
    id: 11,
    title: '混剪电影',
    description: '这是混剪电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/混剪.jpeg'
  },
  {
    id: 12,
    title: '游戏电影',
    description: '这是游戏电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/游戏.jpeg'
  },
  {
    id: 13,
    title: '爱情电影',
    description: '这是爱情电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/爱情.jpeg'
  },
  {
    id: 14,
    title: '生活电影',
    description: '这是生活电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/生活.jpeg'
  },
  {
    id: 15,
    title: '科幻电影',
    description: '这是科幻电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/科幻.jpeg'
  },
  {
    id: 16,
    title: '纪录电影',
    description: '这是纪录电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/纪录.jpeg'
  },
  {
    id: 17,
    title: '美食电影',
    description: '这是美食电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/美食.jpeg'
  },
  {
    id: 18,
    title: '运动电影',
    description: '这是运动电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/运动.jpeg'
  },
  {
    id: 19,
    title: '音乐电影',
    description: '这是音乐电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/音乐.jpeg'
  },
  {
    id: 20,
    title: '预告电影',
    description: '这是预告电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/预告.jpeg'
  }
];

const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
};

onMounted(() => {
  const selectedMovie = movies.find(m => m.id == route.params.id);
  if (selectedMovie) {
    movie.value = selectedMovie;
  } else {
    movie.value = { 
      title: '电影未找到', 
      description: '抱歉，未找到该电影的详细信息', 
      image: 'https://via.placeholder.com/400x600',
      rating: 0,
      year: '',
      genre: '',
      duration: 0
    };
  }
});
</script>

<style scoped>
:root {
  --primary-color: #E50914;
  --text-color: #333;
  --light-text: #666;
  --border-color: #eee;
  --background-color: #f9f9f9;
  --white: #fff;
}

.movie-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: var(--background-color);
}

.detail-header {
  margin-top: 80px;
  width: 380px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-button {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 16px;
}

.icon-back {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5l-6 6 6 6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.movie-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.detail-actions {
  display: flex;
  gap: 15px;
}

.share-button, .favorite-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-color);
}

.icon-share {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-favorite, .icon-active {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-active {
  fill: var(--primary-color);
}
.icon-favorite {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-active {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E50914'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
/* 电影主信息区 */
.movie-main {
  background-color: var(--white);
  position: relative;
}

.movie-poster-container {
  position: relative;
  width: 410px;
  height: 400px;
}

.movie-poster {
  width: 410px;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.hidden {
  display: none;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: none;
}

.video-player.active {
  display: block;
}

.icon-play {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 20px solid white;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

.movie-info {
  margin-top: 20px;
  text-align: center;
  padding: 0 20px;
}

.rating-container {
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 12px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

.movie-rating {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  margin: 0;
}

.rating-label {
  font-size: 14px;
  color: var(--light-text);
  margin-left: 5px;
}

.movie-meta {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
  color: var(--light-text);
  font-size: 14px;
}

.movie-description {
  color: var(--text-color);
  line-height: 1.6;
  text-align: left;
  margin-bottom: 20px;
  font-size: 14px;
}

/* 标签页 */
.movie-tabs {
  margin-top: 10px;
  background-color: var(--white);
}

.tab-list {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.tab-item {
  padding: 15px 20px;
  font-size: 16px;
  color: var(--light-text);
  cursor: pointer;
}

.tab-item.active {
  color: var(--text-color);
  font-weight: 500;
  border-bottom: 2px solid var(--primary-color);
}

.tab-content {
  padding: 20px;
}

.detail-section h3, .cast-section h3, .stills-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-color);
  font-weight: 500;
}

.info-items {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
  font-size: 14px;
}

.label {
  width: 80px;
  color: var(--light-text);
}

.value {
  flex: 1;
  color: var(--text-color);
}

/* 演职人员 */
.cast-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.cast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.cast-image {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.cast-info {
  text-align: center;
}

.cast-name {
  font-size: 14px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}

.cast-role {
  font-size: 12px;
  color: var(--light-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}

/* 剧照 */
.stills-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.still-item {
  flex: 0 0 auto;
  width: 300px;
}

.still-image {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 4px;
}

/* 推荐区域 */
.recommendations {
  margin-top: 10px;
  background-color: var(--white);
  padding: 20px;
}

.recommendations h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--text-color);
  font-weight: 500;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.recommend-item {
  display: flex;
  flex-direction: column;
}

.recommend-poster {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.recommend-info {
  flex: 1;
}

.recommend-title {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-meta {
  display: flex;
  font-size: 12px;
  color: var(--light-text);
}

.recommend-rating {
  margin-right: 10px;
  color: var(--primary-color);
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--light-text);
  background-color: var(--white);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .movie-poster-container {
    width: 220px;
    height: 320px;
  }
  
  .recommend-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .movie-poster-container {
    width: 160px;
    height: 240px;
  }
  
  .recommend-list {
    grid-template-columns: 1fr;
  }
}
</style>